<template>
	<view class="content">
		<view class="main">
			<view class="navigations">
				<view class="mains">
					<view class="back" @click="backs">
					</view>
				</view>
			</view>
			<view class="sub_top">
				<image :src="list[data].image" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="sub_tjcg">
				<p>{{list[data].name}}</p>
			</view>
			<view class="sub_wz">
				<p>{{list[data].title}}</p>
			</view>
			<view class="sub_btn">
				<view class="sub_btn_list">
					<u-button
						style="width: 250rpx;100rpx;border-radius: 40rpx;background-color: black;color: #ffffff;border: none;"
						text="返回订单列表"></u-button>
				</view>
				<view class="sub_btn_list">
					<u-button
						style="width: 250rpx;100rpx;border-radius: 40rpx;background-color: #FBD748;color: black;border: none;"
						text="查看订单详情"></u-button>
				</view>
			</view>
			<view class="sub_btms">
				<view class="btms_title">
					<view class="btms_dian">
						<image src="/static/左点点点.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="btms_wz">
						为你推荐
					</view>
					<view class="btms_dian">
						<image src="/static/右点点点.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<view class="sub_btms_lists">
					<phoneListVue></phoneListVue>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import phoneListVue from "../../../common/my/phone-list/phone-list.vue"
	export default {
		data() {
			return {
				data: 0,
				list: [{
						name: "提交成功",
						image: "/static/提交成功.png",
						title: "将在商家检测设备完成后3个工作日内原路退还支付押金，感谢您的再次租用"
					},
					{
						name: "续租成功",
						image: "/static/提交成功.png",
						title: "您已成功续租，感谢您的再次使用"
					},
					{
						name: "提交失败",
						image: "/static/错误提示_填充.png",
						title: "抱歉！续租失败，您的续租次数已达上限，详情请联系商家"
					},
				]
			}
		},
		onShow() {
			this.data = 2
		},
		components: {
			phoneListVue
		},
		methods: {
			backs() {
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		// background-color: #F6F6F6;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
		background: radial-gradient(#FDEEB0, #FDDC73);
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.navigations {
		width: 100vw;
		height: 180rpx;
		overflow: hidden;

		.mains {
			width: 100%;
			height: 50rpx;
			margin-top: 100rpx;
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			position: relative;

			.back {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 0;
				left: 30rpx;
				background-image: url("/static/后退.png");
				background-size: contain;
			}
		}
	}

	.sub_top {
		width: 30%;
		height: 200rpx;
		// background-color: aqua;
	}

	.sub_tjcg {
		width: 300rpx;
		height: 100rpx;
		// background-color: aqua;
		font-size: 50rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.sub_wz {
		width: 90%;
		height: 100rpx;
		// background-color: aqua;
		text-align: center;
		font-size: 30rpx;
		color: #646358;
	}

	.sub_btn {
		width: 80%;
		height: 150rpx;
		// background-color: aqua;
		display: flex;
	}

	.sub_btn_list {
		width: 50%;
		height: 100%;
	}

	.sub_btms {
		width: 100%;
		height: 55vh;
		background-color: #FCF5CC;
		border-radius: 60rpx 60rpx 0 0;

		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.btms_title {
		width: 50%;
		height: 100rpx;
		// background-color: aqua;
		margin: 0 auto;
		display: flex;
	}

	.btms_dian {
		width: 25%;
		height: 100rpx;
	}

	.btms_wz {
		width: 50%;
		height: 100rpx;
		text-align: center;
		line-height: 95rpx;
		font-size: 40rpx;
	}

	.sub_btms_lists {
		width: 90%;
		flex: 1;
		overflow-y: scroll;
	}
</style>